import Link from "next/link";
import type { CveItem } from "~/server/api/routers/vulnerability";

interface CpeBoxProps {
  cve: CveItem;
  mobile: boolean;
}

export const CpeBox = ({ cve, mobile }: CpeBoxProps) => {
  // Pull out the vendor, product, and version from the CPE string array
  const cpe = cve.configurations?.[0]?.nodes[0]?.cpeMatch?.[0];
  let Vendor = "";
  let Product = "";
  let Version = "";
  let cpeUri = cpe?.criteria ?? "";

  function capitalizeFirstLetter(string: string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }
  function truncateString(string: string, length: number) {
    const truncated = string.slice(0, length);
    return truncated.length < string.length ? truncated + "..." : truncated;
  }

  // Parse the cpe23Uri string to extract vendor, product and version
  const parts = cpeUri.split(":");
  Vendor = truncateString(capitalizeFirstLetter(parts[3] ?? ""), 16); // ? Should process this to add icons for common vendors (e.g. Microsoft, Apple, etc.) in the future
  Product = truncateString(parts[4] ?? "", 16); // ? Should process this to add icons for common products (e.g. internet explorer, etc.) in the future
  Version = truncateString(parts[5] ?? "", 16);

  return (
    <div className="font-orbitron pl-2 text-xs">
      <div className="mb-3 flex flex-col gap-4 md:flex-row">
        <div className="flex flex-col">
          <div className="text-2xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70">
            Vendor
          </div>
          <div className="flex">{Vendor}</div>
        </div>
        <div className="flex flex-col">
          <div className="text-2xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70">
            Product
          </div>
          <div className="flex">
            <div className="overflow-ellipsis whitespace-nowrap">{Product}</div>
          </div>
        </div>
        <div className="flex flex-col">
          <div className="text-2xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70">
            Version
          </div>
          <div className="flex">{Version}</div>
        </div>
      </div>

      {mobile ? (
        <div className="flex flex-col">
          <div className="mb-1">
            <div className="text-2xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70">
              CPE 2.3 URI
            </div>
            <Link
              href={`https://nvd.nist.gov/products/cpe/detail/0B36C194-E2F9-47C8-8063-74F27D3789B3?namingFormat=2.3&orderBy=CPEURI&keyword=${cpeUri}&status=FINAL&startIndex=0&resultsPerPage=20`}
            >
              <div className="truncate overflow-ellipsis whitespace-nowrap font-mono text-xs hover:text-violet-600">
                {cpeUri}
              </div>
            </Link>
          </div>
          <hr className="mb-2 border-dotted border-violet-200/60" />
          <div className="mb-1">
            <div className="text-2xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70">
              CVSS Vector
            </div>
            <div className="overflow-hidden">
              <div className="overflow-ellipsis whitespace-nowrap">
                <Link
                  href={`https://www.first.org/cvss/calculator/3.0#${cve.CVSSV3.vectorString}`}
                >
                  <div className="truncate font-mono text-xs hover:text-violet-600">
                    {cve.CVSSV3.vectorString}
                  </div>
                </Link>
              </div>
            </div>
          </div>
          <hr className="mb-2 border-dotted border-violet-200/60" />
        </div>
      ) : (
        <div className="flex flex-col">
          <div className="mb-1">
            <div className="text-2xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70">
              CPE 2.3 URI
            </div>
            <Link
              href={`https://nvd.nist.gov/products/cpe/detail/0B36C194-E2F9-47C8-8063-74F27D3789B3?namingFormat=2.3&orderBy=CPEURI&keyword=${cpeUri}&status=FINAL&startIndex=0&resultsPerPage=20`}
            >
              <div className="overflow-ellipsis whitespace-nowrap font-mono text-xs hover:text-violet-600">
                {cpeUri}
              </div>
            </Link>
          </div>
          <hr className="mb-2 border-dotted border-violet-200/60" />
          <div className="mb-1">
            <div className="text-2xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70">
              CVSS Vector
            </div>
            <div className="overflow-hidden">
              <div className="overflow-ellipsis whitespace-nowrap">
                <Link
                  href={`https://www.first.org/cvss/calculator/3.0#${cve.metrics?.cvssMetricV31?.[0]?.cvssData?.vectorString}`}
                >
                  <div className="font-mono text-xs hover:text-violet-600">
                    {cve.metrics?.cvssMetricV31?.[0]?.cvssData?.vectorString}
                  </div>
                </Link>
              </div>
            </div>
          </div>
          <hr className="mb-2 border-dotted border-violet-200/60" />
        </div>
      )}
    </div>
  );
};
